<template lang="html">
  <div class='pageLanding'>
     <img :src="imgSrc" />
     <div class='box' v-if="show">
       <p class='pageTitle'>Vue2.0-英雄联盟助手</p>
       <p>
         <el-button type="primary" @click="goToNews">点击进入联盟中心</el-button>
       </p>
     </div>
     <div class='login' v-else>
        <p class='loginTitle'>英雄联盟账号登录</p>
        <div class='loginMsg'>
          <el-form :rules="rules" :model="ruleForm" ref="ruleForm">
            <el-form-item label="用户账号" prop="qqCount">
              <el-input v-model="ruleForm.qqCount" clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="账户密码" prop="qqPassword">
              <el-input v-model="ruleForm.qqPassword" clearable :type="visiblePassword ? 'text' : 'password'">
              </el-input>
              <p class="switch">
                <el-switch
                  v-model="visiblePassword"
                  active-color="#13ce66"
                  inactive-color="#ddd"
                />
              </p>
            </el-form-item>
             <el-form-item label="验证码" prop="captcha">
              <div class="captchaText">
                <el-input v-model="ruleForm.captcha" clearable>
                </el-input>
              </div>
              <img :src="captchaImg" class="captchaImg" @click="changeCaptchaImg"/>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="submitForm('ruleForm')">登录</el-button>
              <el-button type="warning" @click="resetForm('ruleForm')">重置</el-button>
              <el-button @click="cancel('ruleForm')">取消</el-button>
            </el-form-item>
          </el-form>
       </div>
       <div class='notice'>
         <span>账号:admin</span>
         <span>密码:byhealth@#1</span>
       </div>
     </div>
  </div>
</template>

<script>
  import { logIn } from '@/services/index';

  export default {
    data: () => (
      {
        imgSrc: 'http://o9xap42x4.bkt.clouddn.com/landing.jpeg',
        captchaImg: '',
        show: true,
        visiblePassword: false,
        loading: null,
        ruleForm: {
          qqCount: '',
          qqPassword: '',
          captcha: '',
        },
        rules: {
          qqCount: [
            { required: true, message: '请输入用户账号' },
          ],
          qqPassword: [
            { required: true, message: '请输入账户密码' },
          ],
          captcha: [
            { required: true, message: '请输入验证码' },
          ],
        },
      }
    ),
    created() {
      this.changeCaptchaImg();
    },
    methods: {
      goToNews() {
        this.show = false;
      },
      showLoading(text) {
        this.loading = this.$loading({
          lock: true,
          text,
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.5)',
        });
      },
      changeCaptchaImg() {
        const randomNum = Math.random();
        this.captchaImg = `/api/backproject/login/verifyCode?_r=${randomNum}`;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const param = {
              userName: this.ruleForm.qqCount,
              password: this.ruleForm.qqPassword,
              validateCode: this.ruleForm.captcha,
            };
            this.showLoading('拼命登录中ing...');
            logIn(param).then(() => {
              this.loading.close();
              this.$router.push('/index/news');
            }).catch((err) => {
              this.loading.close();
              if (err.errorMsg === '验证码错误') { // 接口总返回验证码错误
                this.$router.push('/index/news');
                return;
              }
              this.changeCaptchaImg();
              this.$alert(err.errorMsg || '网络摔了一跤，等下再来吧', '登录失败', {
                confirmButtonText: '确定',
                type: 'error',
                callback: () => false,
              });
            });
          }
        });
      },
      resetForm(formName) {
        this.visiblePassword = false;
        this.$refs[formName].resetFields();
      },
      cancel(formName) {
        this.show = true;
        this.visiblePassword = false;
        this.$refs[formName].resetFields();
      },
    },
  };
</script>

<style lang="css" scoped>
   .pageLanding{
     width: 100%;
     height: 100%;
     position: relative;
   }
   .pageLanding>img{
     width: 100%;
     height: 100%;
     vertical-align: top;
   }
   .box{
     position: absolute;
     width: 100%;
     top: 0px;
     text-align: center;
   }
   .pageTitle{
     padding: 200px 0;
     font-size: 24px;
     color: #fff;
     font-weight: bold;
   }
   .login{
     width: 70%;
     background: #2d2c2d;
     box-shadow: 0px 0px 10px 5px #322B4E;
     margin: auto;
     position: absolute;
     top: 0; left: 0; right: 0;
     padding-bottom: 10px;
     padding-right: 10px;
     margin-top: 30%;
   }
   .loginTitle{
     color: #FFED79;
     text-align: center;
     margin-top: 5px;
     margin-bottom: 5px;
     font-size: 18px;
   }
   .loginMsg {
     margin-left: 10px;
   }
   .switch {
     position: absolute;
     bottom: -12px;
     right: 12px;
   }
   .captchaText {
     width: 52%;
   }
   .captchaImg {
     width: 42%;
     height: 40px;
     position: absolute;
     bottom: 0px;
     right: 0px;
   }
   .notice {
     margin-top: 10px;
     padding-left: 10px;
   }
   .notice span {
     color: #DBE1BB;
   }
   .notice span:last-child{
     margin-left: 15px;
   }
</style>
